<template>
	<view class="wrap safe-area">
		<view class="wrap-content flex column">
			<view class="wrap-item flex align-center just-between">
				<view class="left">
					标题
				</view>
				
				<input class="right" placeholder="请输入标题" placeholder-class="place" v-model="title" />
			</view>
			
			<view class="wrap-item">
				<view class="left">
					图片
				</view>
				
				<view class="wrap-img">
					<view class="file" @click="onUpload">
						<block v-if="file === ''">
							<view class="upload-box flex align-center just-center">
								<image class="upload" src="/static/images/upload.png" />
							</view>
						</block>
						
						<image class="img" v-else :src="file" />
					</view>
				</view>
			</view>
			
			<view class="wrap-item flex align-center just-between">
				<view class="left">
					播放量
				</view>
				
				<input
					class="right"
					placeholder="请输入播放量"
					placeholder-class="place"
					type="number"
					v-model="num"
				/>
			</view>
			
			<view class="add-btn" @click="onSure">
				{{ index == -1 ? "确定" : "修改" }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				title: "",
				file: "",
				num: "",
			}
		},
		onLoad(options) {
			if (options.hasOwnProperty("index")) {
				var index = +options.index;
				this.index = index;
				
				var list = this.$stoarge.getWorksList();
				const item = list[index];
				this.file = item.file;
				this.num = item.number;
				this.title = item.title;
			}
		},
		methods: {
			/**
			 * 上传
			 */
			onUpload() {
				uni.chooseFile({
					count: 1,
					success: res => {
						this.file = res.tempFilePaths[0];
					}
				})
			},
			/**
			 * 确定
			 */
			onSure() {
				if (this.title === "") {
					this.$st.show("请输入标题")
					return;
				}
				if (this.file === "") {
					this.$st.show("请上传图片")
					return;
				}
				if (this.num === "") {
					this.$st.show("请输入播放量")
					return;
				}
				
				let obj = {
					file: this.file,
					title: this.title,
					number: this.num,
				}
				
				var list = [...this.$stoarge.getWorksList()];
				
				if (this.index === -1) {
					list.unshift(obj);
					this.$stoarge.setWorksList(list);
					
					this.$st.success("添加成功", () => {
						uni.navigateBack();
					})
				} else {
					list[this.index] = obj;
					this.$stoarge.setWorksList(list);
					this.$st.success("修改成功", () => {
						uni.navigateBack();
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F6F6;
	}
	
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;
		
		.wrap-content {
			width: 100%;
			overflow: hidden;
			gap: 30rpx;
			
			.wrap-item {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: white;
				gap: 30rpx;
				border-radius: 30rpx;
				
				.left {
					color: #333333;
					font-size: 30rpx;
				}
				
				.right {
					flex: 1;
					overflow: hidden;
					color: #333333;
					font-size: 30rpx;
					text-align: right;
				}
				
				.place {
					color: #999999;
					font-size: 30rpx;
				}
				
				.wrap-img {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;
					
					.file {
						width: 200rpx;
						height: 200rpx;
						
						.upload-box {
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
							background-color: #F6F6F6;
							
							.upload {
								width: 50rpx;
								height: 50rpx;
							}
						}
						
						.img {
							width: 200rpx;
							height: 200rpx;
						}
					}
				}
			}
			
			.add-btn {
				margin-top: 50rpx;
				width: 100%;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				border-radius: 50rpx;
				color: white;
				font-size: 30rpx;
				background-color: blue;
			}
		}
	}
</style>